<template>
    <div class="content">
      <!--标签卡-->
      <div class="myTabs">
        <p v-for="(item,index) in tabsList" :key="index" @click="handleChange(index)" :class="item.isActive ? 'myTabsActive' : ''">{{item.text}}</p>
      </div>

      <!--排行列表记录-->
      <div class="ranking-item" v-for="(item,index) in rankingList" :key="index">
          <div class="ranking-item-left">
            <p v-if="index == 0 "><img src="../../../static/image/icon-one.png"></p>
            <p v-else-if="index == 1 "><img src="../../../static/image/icon-two.png"></p>
            <p v-else-if="index == 2 "><img src="../../../static/image/icon-three.png"></p>
            <p v-else>{{ index+1 }}</p>
            <div :class="[index == 0 ? 'rankingFirst' : '','ranking-item-icon']"><img :src="item.avatarUrl" alt=""></div>
            <p class="nickName">{{ item.nickName }}</p>
          </div>
        <div class="ranking-item-right">
          <p style="font-size: 24rpx;color: #282828">能量：{{ item.signCount }}</p>
        </div>
      </div>

      <i-load-more :tip="tip" :loading="lodingShow" />
    </div>
</template>
<script>
    export default {
        name: '',
        data(){
            return {
              current:0,  //当前选中的标签卡序号
              tabsList:[
                {
                    text:'本周排行',
                    isActive:true
                },
                {
                  text:'本月排行',
                  isActive:false
                },
                {
                  text:'本季排行',
                  isActive:false
                },
                {
                  text:'总排行',
                  isActive:false
                }
              ],  //标签卡数组
              rankingList:[],  //排行数组
              pageNum:1,  //分页第几页的数据
              tip:'数据加载中',
              lodingShow:true,
              sizeTotal:'',  //总页数
            }
        },
      methods:{

        //选项卡切换函数
        handleChange(e){
            this.tabsList.forEach((val)=>{
                val.isActive = false;
            });
            this.tabsList[e].isActive = !this.tabsList[e].isActive;
            this.current = e;
            this.getRankingList();
            this.pageNum = 1;
        },

        //获取排名
        getRankingList(){
          let url = '';
          let weekRanking = '/statistic/statisticWeekCount';  //周排名
          let monthRanking = '/statistic/statisticMonthCount';  //月排名
          let quarterRanking = '/statistic/statisticQuarterCount';  //季度排名
          let totalRanking = '/statistic/statisticTotalCount';  //总排名
          if(this.current == 0){
            url = weekRanking
          } else if(this.current == 1){
            url = monthRanking;
          } else if(this.current == 2){
            url = quarterRanking
          } else {
            url = totalRanking
          }
          this.$httpWX.get({
            url: url,
            data: {
                pageNum: this.pageNum
            }
          }).then(res => {
            if(res.code == 0){
              this.lodingShow = false;
              this.tip = '数据加载完成';
              this.sizeTotal = res.data.pageinfo.totalPages;
              if(this.pageNum == 1){
                  this.rankingList = [];
                  this.rankingList = res.data.content
              } else {
                res.data.content.forEach((val)=>{
                  this.rankingList.push(val);
                })
              }
            }
          });
        },
      },
      onShow(){
        this.current = 0;
        this.pageNum = 1;
        this.getRankingList()
      },
      //用户下拉刷新事件
      onReachBottom(){
        this.pageNum++;
        this.lodingShow = true;
        this.tip = '数据加载中';
        if(Number(this.pageNum) <= Number(this.sizeTotal)){
          this.getRankingList();
        } else{
          this.lodingShow = false;
          this.tip = '已经到底啦'
        }
      }
    }
</script>

<style>
  /*标签卡样式*/
  .myTabs{
    display: flex;
    align-items: center;
    height: 94rpx;
    background-color: #24C68A;
    box-sizing: border-box;
    box-shadow:0px 5px 10px 0px rgba(110,128,134,0.3);
  }
  .myTabs>p{
    flex:1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 26rpx;
    color: #FFFFFF;
    border-bottom: 4rpx solid #24C68A;
  }
  .myTabsActive{
    border-bottom: 4rpx solid white !important;
  }
  /*排行列表样式*/
  .ranking-item{
    width: 95%;
    height: 165rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid #EEEEEE;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content:last-child .ranking-item{
    border-bottom: 0 solid #EEEEEE !important;
  }

  .ranking-item-left{
    width: 85%;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .nickName{
    font-size: 28rpx;
    color: #282828;
    width:60%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .rankingFirst{
    border: 4rpx solid #FFC536;
  }
  .ranking-item-left>p:nth-of-type(1){
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
  }
  .ranking-item-left>p:nth-of-type(1)>img{
    width: 100%;
    height: 100%;
  }
  .ranking-item-icon{
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    margin: 0 30rpx;
    overflow: hidden;
  }
  .ranking-item-icon>img{
    width: 100%;
    height: 100%;
  }
  .ranking-item-right{
    height: 100%;
    display: flex;
    align-items: center;
  }
</style>
